<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-row>
          <el-form label-width="80px">
            <el-col :span="12">
              <el-form-item label="选择时间" class="licc-data-center-goods-info-filter-form-item">
                <el-date-picker
                  style="width: 230px"
                  size="small"
                  v-model="salesDatePickerValue"
                  :picker-options="salesPickerOptions"
                  value-format="yyyy-MM"
                  type="monthrange"
                  align="right"
                  unlink-panels
                  range-separator="-"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <el-button type="info" size="small" @click="restGoodsSalesButton">重 置</el-button>
                <el-button type="primary" size="small" @click="filterGoodsSalesButton">筛 选</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <el-row>
          <el-col :span="24">
            <ve-line :data="salesData" :extend="extend"></ve-line>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-col :span="24" class="licc-data-center-goods-info-col">
              总销售量：{{goodsVolume}} - 总销售额（百）：{{goodsPrice}} - 总下单量：{{orderVolume}}
            </el-col>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import dataCenterApi from '@/api/backstage/dataCenter'
  export default {
    data () {
      this.extend = {
        series: {
          label: {
            normal: {
              show: true
            }
          }
        }
      }
      return {
        /** 时间数据 **/
        salesDatePickerValue:'',
        salesPickerOptions:{
          shortcuts: [{
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()]);
            }
          }, {
            text: '今年至今',
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 5);
              picker.$emit('pick', [start, end]);
            }
          }],
          disabledDate(time) {
            return time.getTime() > new Date();
          }
        },
        params:{},
        salesData: {
          columns: ['年月', '销售量', '销售额（百）', '下单量'],
          rows: []
        },
        goodsPrice: 0,
        goodsVolume: 0,
        orderVolume: 0,
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        this.initParamsDate();
        this.initPage();
      },
      initPage(){
        dataCenterApi.getGoodsSalesInfo(this.params).then(res => {
          this.salesData = {
            columns: res.data.columns,
            rows: res.data.rows
          };
          this.goodsPrice = res.data.goodsPrice;
          this.goodsVolume = res.data.goodsVolume;
          this.orderVolume = res.data.orderVolume;
        }).catch(() => {
          this.$notify.error({title:'失败', message:'获取销售信息失败，请稍后再试！'});
        });
      },
      initParamsDate(){
        const end = new Date();
        const start = new Date();
        start.setMonth(start.getMonth() - 11);
        this.params = {
          beginDate: start.getFullYear()+"-"+(start.getMonth()+1),
          endDate: end.getFullYear()+"-"+(end.getMonth()+1)
        }
      },
      /** 重置筛选时间 **/
      restGoodsSalesButton(){
        /** 重置时间选择器时间 **/
        this.salesDatePickerValue = null;
        /** 重置参数时间 **/
        this.initParamsDate();
        /** 请求数据 **/
        this.initPage();
      },
      /** 筛选事件 **/
      filterGoodsSalesButton(){
        if (this.salesDatePickerValue!=null&&this.salesDatePickerValue.length==2){
          /** 装配时间选择器时间 **/
          this.params = {
            beginDate:  this.salesDatePickerValue[0],
            endDate: this.salesDatePickerValue[1]
          }
        } else {
          /** 重置参数时间 **/
          this.initParamsDate();
        }
        /** 请求数据 **/
        this.initPage();
      },
    }
  }
</script>
<style>
  .licc-data-center-goods-info-filter-form-item{
    margin-bottom: 12px;
  }
  .licc-data-center-goods-info-col{
    font-size: 14px;
    text-align: center;
  }
</style>
<!--salesData: {-->
<!--columns: ['年月', '销售量', '销售额（百）', '下单量'],-->
<!--rows: [-->
<!--{ '年月': '18/10', '销售量': 5393, '销售额（百）': 4093, '下单量': 3012 },-->
<!--{ '年月': '18/11', '销售量': 3530, '销售额（百）': 3230, '下单量': 2326 },-->
<!--{ '年月': '18/12', '销售量': 2923, '销售额（百）': 2623, '下单量': 1976 },-->
<!--{ '年月': '19/1', '销售量': 5723, '销售额（百）': 5423, '下单量': 4993 },-->
<!--{ '年月': '19/2', '销售量': 3792, '销售额（百）': 3492, '下单量': 3521 },-->
<!--{ '年月': '19/3', '销售量': 3593, '销售额（百）': 4293, '下单量': 3978 },-->
<!--{ '年月': '19/4', '销售量': 6593, '销售额（百）': 6293, '下单量': 6138 },-->
<!--{ '年月': '19/5', '销售量': 2593, '销售额（百）': 3293, '下单量': 2789 },-->
<!--]-->
<!--}-->
